<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/jquery.min.js"></script>

</head>

<body>

    <h1>每天都要开心喔~朋友</h1>
    <div class="container">
        <div class="sbox1">
            <h4 id="f">过去的事情我都已做好</h4>
            <p>你真不错！</p>
        </div>

        <div class="box">

            <div class="scrollDiv" id="s1">
                <ul>
                    <li>
                        <h3>生物明朗</h3>
                    </li>
                    <li>
                        <h3>万物可爱</h3>
                    </li>
                    <li>
                        <h3>未来可期</h3>
                    </li>
                    <li>
                        <h3>保持开心</h3>
                    </li>
                    <li>
                        <h3>立即行动</h3>
                    </li>
                    <li>
                        <h3>发财暴富</h3>
                    </li>
                    <li>
                        <h3>运动健身</h3>
                    </li>
                    <li>
                        <h3>心宽体胖</h3>
                    </li>
                    <li>
                        <h3>接受自己</h3>
                    </li>
                    <li>
                        <h3>祝你好运</h3>
                    </li>
                    <li>
                        <h3>继续努力</h3>
                    </li>
                    <li>
                        <h3>多笑一笑</h3>
                    </li>
                </ul>
            </div>

            <script type="text/javascript">
                function AutoScroll(obj) {
                    $(obj).find("ul:first").animate({
                        marginTop: "-50px"
                    }, 500, function () {
                        $(this).css({
                            marginTop: "0px"
                        }).find("li:first").appendTo(this);
                    });
                }
                $(document).ready(function () {
                    setInterval('AutoScroll("#s1")', 2000);
                });
            </script>



        </div>
        <div class="sbox2">
            <h4 id="s"> 我已做好应付未来的准备</h4>
            <p>全力以赴！</p>
        </div>
    </div>


    <script>
        $(document).ready(function () {
            $("#f").click(function () {
                $(".sbox1").toggleClass("togglebg");
            });
            $("#s").click(function () {
                $(".sbox2").toggleClass("togglebg");
            });
        });
    </script>
</body>

</html>